<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        li {
            list-style: none;
        }

        #tips {
            background-color: grey;
            line-height: 45px;
        }

        .list {
            padding: 10px 0;
            background-color: #f1f1f1;
        }

        .list li {
            height: 32px;
            line-height: 32px;
            border: 1px dashed #333;
        }
    </style>
</head>

<body>
    <div class="wrap">
        <h3 id="tips">模拟封装jquery</h3>
        <div class="list">
            <li>01</li>
            <li>02</li>
            <li>03</li>
            <li>04</li>
            <li>05</li>
            <li>06</li>
        </div>
    </div>
</body>
<script>
    // jquery  原生js封装的一个js库 (获取元素 操作元素 绑定事件)
    // 模拟jquery
    // 1. 练习构造函数的封装
    // 2. 预习jquery

    // html()
    // width()
    // hide()

    // 单元素  => 直接操作
    // var h2 = document.querySelector("#tips");  //单元素  如果有多个默认返回第一个
    // h2.innerHTML = "hello";


    // 多元素 => 遍历集合中每一个元素 操作
    // var liList = document.querySelectorAll(".list li");  // 多元素  即便是一个也会放到集合中
    // for (var i = 0; i < liList.length; i++) {
    //     var ele = liList[i];
    //     ele.innerHTML = "world";
    // }


    // 直接用document.querySelectAll()   把获取的元素统一放到集合中  遍历处理
    // var eles = document.querySelectorAll("#tips");  // 多元素  即便是一个也会放到集合中
    // var eles = document.querySelectorAll(".list li");  // 多元素  即便是一个也会放到集合中
    // 设置html
    // for (var i = 0; i < eles.length; i++) {
    //     var ele = eles[i];
    //     ele.innerHTML = "world";
    // }

    // 获取
    // eles[0].innerHTML 

    var getEle = {
        eles: document.querySelectorAll(".list li"), // 被操作的元素的集合
        // 设置html
        setHtml(con) {
            // this -> 调用此方法的对象
            // 遍历集合 操作集合中的每个元素

            for (var i = 0; i < this.eles.length; i++) {
                var ele = this.eles[i];
                ele.innerHTML = con;
            }
        },
        // 获取html
        getHtml() {
            // var list = [];
            // for (var i = 0; i < this.eles.length; i++) {
            //     var ele = this.eles[i];
            //     list.push(ele.innerHTML)
            // }
            // return list;
            // jquery  如果有多个元素 默认返回第一个
            return this.eles[0].innerHTML;
        },
        // html()   获取和设置html
        // html(123123)   有参数就设置
        // html()         没有参数就获取
        html(con) {
            // arguments 实际参数的集合
            if (arguments.length >= 1) {  //有参数就设置
                for (var i = 0; i < this.eles.length; i++) {
                    var ele = this.eles[i];
                    ele.innerHTML = con;
                }
            } else {  //没有参数就获取 (默认返回第一个)
                return this.eles[0].innerHTML;
            }
        },
        // text()   获取和设置text
        // text(123123)   有参数就设置
        // text()         没有参数就获取
        text(con) {
            // arguments 实际参数的集合
            if (arguments.length >= 1) {  //有参数就设置
                for (var i = 0; i < this.eles.length; i++) {
                    var ele = this.eles[i];
                    ele.innerText = con;
                }
            } else {  //没有参数就获取 (默认返回第一个)
                return this.eles[0].innerText;
            }
        },
        // val()   获取和设置value值
        // val(123123)   有参数就设置
        // val()         没有参数就获取
        val(con) {
            // arguments 实际参数的集合
            if (arguments.length >= 1) {  //有参数就设置
                for (var i = 0; i < this.eles.length; i++) {
                    var ele = this.eles[i];
                    ele.value = con;
                }
            } else {  //没有参数就获取 (默认返回第一个)
                return this.eles[0].value;
            }
        },
    }
    // getEle.setHtml("hello");

    // var result = getEle.getHtml();
    // console.log(result);

    // getEle.html("");

    var result = getEle.html();
    console.log(result);

</script>

</html>